<template>
<div style="z-index:5;left: 0;top: 0;position: absolute;height: 100%;width: 100%;background-color:white">
    <div class="zhezhao" :style="zhezhaoHeight"></div>
    <img src="../../../../assets/changepsw/back.png" class="img_back" @click="goper">
    <div class="div1">
        <span>地址管理</span>
    </div>
    <!-- <div class="div2" v-for="(data,index) in testData" :key="index"
    @touchstart="TouchStart(index)" @touchmove="TouchMove" @touchend="TouchEnd"
    :style="CloseDiv4Btn&&PressIndex==index?'background-color: rgb(247, 241, 250);':LongPressTimeOut&&PressIndex==index?'background-color: rgb(230, 230, 230);':''">
        <div style="padding:13px;padding-bottom:0px;" @click="CloseDiv4(index)">
            <span>收货人名字</span>
            <span style="margin-left:20px">{{data.phone.slice(0,3)}}*****{{data.phone.slice(8,11)}}</span>
        </div>
        <div style="padding:13px;padding-top:8px">
            <span class="span1" v-show="data.default">默认</span>
            <span class="span2">{{data.tag}}</span>
            <span class="span3" 
            :style="data.tag=='家'?typeStyle[0]:data.tag=='学校'?typeStyle[1]:data.tag=='公司'?typeStyle[2]:typeStyle[3]">
            </span>
            <div class="div3" @click="CloseDiv4(index)"
            :style="data.default?data.tag=='家'?typeStyle[4]:typeStyle[5]
            :data.tag=='家'?typeStyle[6]:typeStyle[7]">
                <span>福建省泉州市南安市康美镇康元路8号福建省南安市康美镇康</span>
            </div>
            <div class="div4" v-show="Div4Show==index" :style="div4Style">
                <span class="span4" style="margin-right:15px" @click="deleteAddress(index)" v-show="TwoBtnShow">删除</span>
                <span class="span4" :style="span4Style" @click="editAddress(index)" v-show="TwoBtnShow">编辑</span>
            </div>
        </div>
    </div> -->
    <div class="div2" v-for="(data,index) in AddData" :key="index"
    @touchstart="TouchStart(index)" @touchmove="TouchMove" @touchend="TouchEnd" v-show="ShowLater"
    :style="CloseDiv4Btn&&PressIndex==index?'background-color: rgb(247, 241, 250);':LongPressTimeOut&&PressIndex==index?'background-color: rgb(230, 230, 230);':''">
        <div style="padding:13px;padding-bottom:0px" @click="CloseDiv4(index)">
            <span>{{data.name}}</span>
            <span style="margin-left:20px">{{data.phone.slice(0,3)}}*****{{data.phone.slice(8,11)}}</span>
        </div>
        <div style="padding:13px;padding-top:8px">
            <span class="span1" v-show="data.isDefault">默认</span>
            <span class="span2">{{data.tag}}</span>
            <span class="span3" 
            :style="data.tag=='家'?typeStyle[0]:data.tag=='学校'?typeStyle[1]:data.tag=='公司'?typeStyle[2]:typeStyle[3]">
            </span>
            <div class="div3" @click="CloseDiv4(index)"
            :style="data.isDefault?data.tag=='家'?typeStyle[4]:typeStyle[5]
            :data.tag=='家'?typeStyle[6]:typeStyle[7]">
                <span>{{data.address}}</span>
            </div>
            <div class="div4" v-show="Div4Show==index" :style="div4Style">
                <span class="span4" style="margin-right:15px" @click="deleteAddress(index)" v-show="TwoBtnShow">删除</span>
                <span class="span4" :style="span4Style" @click="editAddress(index)" v-show="TwoBtnShow">编辑</span>
            </div>
        </div>
    </div>
    <div class="div5" @click="addAddress">
        <div class="div6">添加收货地址</div>
    </div>
    <ImgLocation class="img_location" :style="ShowLater?'opacity:1':'opacity:0'"></ImgLocation>
    <div ref="myimg"></div>
    <div v-show="AreYouSureDelete" @touchmove.prevent @mousewheel.prevent>
        <div class="zhezhao2" :style="zhezhao2Height" @click="zhezhao2Btn"></div>
        <div class="zhezhao3" :style="zhezhao3Style1+zhezhao3Style2">
            <div class="div7">确定删除该地址？</div>
            <div>
                <span class="div7span" style="border-right:1px solid rgb(205, 205, 205,0.5);border-bottom-left-radius: 10px;" @click="DeleteCancel">取消</span>
                <span class="div7span" style="border-bottom-right-radius: 10px;" @click="DeleteSure">确定</span>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import ImgLocation from './img/img_location.vue'
export default {
    name:'addressShow',
    data(){
        return{
            typeStyle:[
                'background-color: rgb(255, 195, 206);box-shadow: 0px 0px 7px 7px rgb(255, 195, 206);width:0px',
                'background-color: rgb(255, 227, 178);box-shadow: 0px 0px 7px 7px rgb(255, 227, 178);',
                'background-color: rgb(218, 255, 158);box-shadow: 0px 0px 7px 7px rgb(218, 255, 158);',
                'background-color: rgb(195, 239, 255);box-shadow: 0px 0px 7px 7px rgb(195, 239, 255);',
                'text-indent: 4.2em;',
                'text-indent: 5.2em;',
                'text-indent: 1.5em;margin-top:-1.6px',
                'text-indent: 2.5em;margin-top:-1.6px',
            ],
            testData:[
                    {tag:'其他',default:1,phone:'18150618073'},
                    {tag:'学校',default:0,phone:'18150618073'},
                    {tag:'家',default:0,phone:'18150618073'},
                    {tag:'公司',default:0,phone:'18150618073'},
                    {tag:'其他',default:1,phone:'18150618073'},
                    // {tag:'学校',default:0,phone:'18150618073'},
                    // {tag:'家',default:0,phone:'18150618073'},
                    // {tag:'公司',default:0,phone:'18150618073'},
                    
            ],
            AddData:[],
            AreYouSureDelete:0,
            DeleteIndex:'',
            zhezhao3Style1:'',
            swing:'',
            zhezhao3Style2:'',
            LongPressTimeOut:0,  //定时器
            PressIndex:99,
            Div4Show:99,
            div4Style:'',
            span4Style:'',
            TwoBtnShow:'',
            zhezhaoHeight:'',
            zhezhao2Height:'',
            ShowLater:0,
            CloseDiv4Btn:0,
        }
    },
    components:{ImgLocation},
    methods:{
        goper(){this.$router.replace({name:'intercept_backspace'})},
        deleteAddress(index){
            this.AreYouSureDelete=1
            this.DeleteIndex=index
        },
        DeleteCancel(){this.AreYouSureDelete=0},
        DeleteSure(){
            this.$addr.get(`address/${this.AddData[this.DeleteIndex].aid}/delete`).then(
                response=>{
                    console.log('删除地址请求成功',response.data);
                    this.$notify({
                        title: '恭喜您',
                        message: '删除该地址成功',
                        type: 'success'
                    });
                    //要删除指定某个数组
                    this.AddData.splice(this.DeleteIndex,1)
                    this.AddData[0].isDefault=1
                    this.AreYouSureDelete=0
                    this.Div4Show=99
                },
                error=>{
                    this.$message({
                        message:'删除地址请求失败，请重新登陆',
                        tag:'error'
                    })
                    console.log("删除地址请求失败",error.message);
                }
            )
        },
        zhezhao2Btn(){
            this.swing=!this.swing
        },
        editAddress(index){
            // this.$router.push({name:'editAddress',params:{Addressdata:this.testData[index]}})
            /**修改功能临时添加*/
            this.$router.push({name:'editAddress',params:{Addressdata:this.AddData[index]}})
        },
        addAddress(){this.$router.push({name:'editAddress'})},
        TouchStart(index){   //开始摁
            if(this.Div4Show!=index){
                this.Div4Show=99
                this.PressIndex=index
                this.LongPressTimeOut=setTimeout(() => {
                    this.LongPressTimeOut=0
                    this.Div4Show=index
                }, 500);
            }
        },
        TouchMove(){    //摁着拖拽离开
            this.PressIndex=99
            clearTimeout(this.LongPressTimeOut)
            this.LongPressTimeOut=0
        },
        TouchEnd(){     //摁完
            // this.PressIndex=99
            clearTimeout(this.LongPressTimeOut)
            this.LongPressTimeOut=0
        },
        CloseDiv4(index){
            // console.log(this.Div4Show);
            // console.log(this.LongPressTimeOut);
            if(this.Div4Show==index&&!this.LongPressTimeOut){
                this.Div4Show=99
                this.CloseDiv4Btn=1
                setTimeout(() => {
                    this.CloseDiv4Btn=0
                }, 200);
            }
        },
    },
    mounted(){
        setTimeout(() => {
            this.ShowLater=1
        }, 250);
        document.documentElement.scrollTop=0
        this.$addr.get(`address/get_by_uid`).then(
            response=>{
                console.log('用户地址信息请求成功',response.data);
                this.AddData=response.data.data
                setTimeout(() => {
                    if(this.$refs.myimg.getBoundingClientRect().top+155+58>window.innerHeight){
                        this.zhezhaoHeight='height:'+(this.$refs.myimg.getBoundingClientRect().top+155)+'px;'
                        this.zhezhao2Height='height:'+(this.$refs.myimg.getBoundingClientRect().top+155+58)+'px;'
                    }
                }, 200);
            },
            error=>{
                this.$message({
                    message:'用户地址信息请求失败，请重新登陆',
                    tag:'error'
                })
                console.log("用户地址信息请求失败",error.message);
            }
        )
    },
    watch:{
        AreYouSureDelete(value){
            this.zhezhao3Style1='opacity:0'
            if(value){
                let num = 0
                var id =setInterval(() => {
                    if(num >= 1){
                        clearInterval(id)
                    }
                    this.zhezhao3Style1='opacity:'+num
                    num+=0.2
                    // console.log(num);
                }, 30);
            }
        },
        swing(){
            this.zhezhao3Style2=';margin-left: -150px;'
            let num = -150
            let num2 = -147
            let num3 = -153
            let num4 = -147
            var id =setInterval(() => {
                if(num >= -147){
                    if(num2 <= -153){
                        if(num3 >= -147){
                            if(num4 <= -150){
                                clearInterval(id)
                            }else{
                                num4-=2
                                this.zhezhao3Style2=';margin-left:'+num4+'px'
                            }
                        }else{
                            num3+=2
                            this.zhezhao3Style2=';margin-left:'+num3+'px'
                        }
                    }else{
                        num2-=2
                        this.zhezhao3Style2=';margin-left:'+num2+'px'
                    }
                }else{
                    num+=2
                    this.zhezhao3Style2=';margin-left:'+num+'px'
                }
            }, 14);
        },
        Div4Show(value){
            if(value == this.PressIndex){
                let num=-50
                var id= setInterval(() => {
                    if(num >=20){
                        clearInterval(id)
                    }else{
                        num+=5
                        this.div4Style='margin-top:'+num+'px;'
                    }
                    // console.log(this.div4Style);
                }, 10);
                setTimeout(() => {
                    this.TwoBtnShow=1
                    let num2 = 155
                    var id2 = setInterval(() => {
                        if(num2 <= 0){
                            clearInterval(id2)
                        }else{
                            num2-=5
                            this.span4Style='margin-right:'+num2+'px;'
                        }
                        // console.log(this.span4Style);
                    }, 2);
                }, 300);
            }else{
                this.TwoBtnShow=0
            }
        },
    },
}
</script>

<style scoped>
.div7span{
    border-top: 1px solid rgb(205, 205, 205,0.5);
    background-color: white;
    padding: 15px;
    padding-left: 59px;
    padding-right: 59px;
    position: relative;
}
.div7{
    padding-top: 30px;
    width: 300px;
    margin-bottom: 30px;
}
.zhezhao3{
    text-align: center;
    background-color: white;
    position: fixed;
    bottom: 50%;
    left: 50%;
    z-index: 3;
    border-radius: 10px;
    margin-left: -150px;
    margin-left: -153px;
    margin-left: -148px;
}
.zhezhao2{
    width: 100%;
    height: 100%;
    /* padding-bottom: 210px; */
    background-color: black;
    opacity: 0.35;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
.div6{
    padding-top: 12px;
    padding-bottom: 12px;
    border-radius: 8px;
    background-color: rgb(206, 171, 255);
    color: white;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
}
.div5{
    background-color: rgb(255, 255, 255);
    text-align: center;
    position: fixed;
    bottom: 0px;
    z-index: 2;
    width: 100%;
}
.span4{
    padding: 10px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 18px;
    border: 1px solid rgb(122, 122, 122);
}
.div4{
    text-align: right;
    border-top: 1px solid rgb(233, 233, 233);
    margin-top: 10px;
    padding-top: 20px;
    padding-bottom: 12px;
    height: 20px;
}
.div3{
    margin-top: -18px;
}
.span1{
    font-size: 11px;
    padding: 2px;
    border-radius: 5px;
    /* position: absolute; */
    margin-top: 1px;
    background-color: rgb(235, 235, 235);
    box-shadow: 0px 0px 1.5px 0.5px rgb(235, 235, 235);
    margin-right: 12px;
}
.span2{
    z-index: 1;
    position: absolute;
    margin-top: -1.6px;
}
.span3{
    position: absolute;
    width: 15px;
    margin-top: 10px;
    margin-left: 1px;
    border-radius: 5px;
    background-color: rgb(255, 195, 206);
    box-shadow: 0px 0px 7px 7px rgb(255, 195, 206);
}
.img_location{
    width: 40%;
    z-index: -1;
    height: 250px;
    margin-top: -90px;
    right: 20px;
    position: absolute;
    margin-bottom: -20px;
    transition: opacity 1.5s ease-out;
}
.div1{
    background: linear-gradient(to right,rgb(210, 185, 255),rgb(172, 124, 255));
    color: white;
    text-align: center;
    width: 100%;
    padding-top: 23px;
    padding-bottom: 15px;
    user-select: none;
}
.img_back{
    margin-top: 28px;
    left: 14px;
    height: 18px;
    position: absolute;
}
.zhezhao{
    height: 100%;
    width: 100%;
    /* padding-bottom: 210px; */
    background-color: rgb(229, 239, 243);
    opacity: 0.5;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}
.div2{
    margin-left: 5px;
    margin-right: 5px;
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    margin-top: 12px;
    font-size: 14px;
    box-shadow: 0px 2px 4px 0.1px rgb(236, 236, 236);
    transition: background-color 0.2s ease-in;
}
*{
    -moz-user-select: none;
    -webkit-user-select:none;
    user-select: none;
    /* pointer-events: none; */
}
</style>